<script setup>
import { ref, reactive, watch } from "vue";
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { request } from "@/common/http";
import { ApiUrl } from "@/common/ApiUrl";
import { Toast, jumpPage } from "@/utils";
import NavBar from "../../components/NavBar.vue";

const state = reactive({
	navHeight: 0,
	params: {
		/* 用户手机号码 */
		mobile: null,
		verdict: 0,
		/* 当前页码 */
		pageNum: 1,
		/* 每页显示数量 */
		pageSize: 10,
		/* 总共有多少页 */
		pageCount: 1,
	},
	/* 用户角色 */
	role: {
		1: "系统管理员",
		2: "管理员",
		3: "超级代理",
		4: "代理",
		5: "运营商",
		6: "财务",
		7: "补货员",
		8: "测试员",
	},
	/* 用户列表 */
	userList: [],
	/* 是否打开选择要分配的设备弹窗 */
	isShowPopup: false,
	/* 当前选择的用户ID */
	userId: null,
	/* 选择要分配的设备弹窗所有设备列表 */
	allEquipmentList: [],
})

onShow(() => {
	/* 获取子账号列表数据 */
	getUserList();
})

/* 上拉加载 */
onReachBottom(() => {
	state.params.pageNum++;
	if (state.params.pageNum < state.params.pageCount + 1 && (state.params.pageCount != 1)) {
		/* 获取子账号列表数据 */
		getUserList();
	} else {
		/* 没有数据了 */
	}
})

/* 请输入手机号码搜索框搜索按钮点击事件 */
const handleSearch = () => {
	if (!state.params.mobile) return Toast("请先输入手机号码");
	state.userList= [];
	/* 获取子账号列表数据 */
	getUserList();
}

/* 获取子账号列表数据 */
const getUserList = () => {
	request({
		url: ApiUrl.getUserList,
		method: "post",
		data: {
			...state.params
		}
	}).then(res => {
		state.userList = state.userList.concat(res.data.list);
		state.params.pageCount = res.data.pages;
	})
}

/* 复制按钮点击事件 */
const handleCopyMobile = (mobile) => {
	uni.setClipboardData({
		data: mobile,
		success: () => {
			Toast("复制成功");
		},
		fail: () => {
			Toast("复制失败");
		}
	})
}

/* 分配设备按钮点击事件 */
const handleEquipment = (item) => {
	state.userId = item.id;
	request({
		url: `${ApiUrl.findAllEquipmentOrAssigned}/${item.id}`
	}).then(res => {
		state.isShowPopup = true;
		state.allEquipmentList = res.data;
	})
}

/* 选择要分配的设备弹窗取消按钮点击事件 */
const handlePopupClose = () => {
	state.isShowPopup = false;
	state.allEquipmentList = [];
}

/* 选择要分配的设备弹窗确定按钮点击事件 */
const handlePopupConfirm = () => {
	const select = state.allEquipmentList.filter(item => item.selected);
	if (state.allEquipmentList.length < 1) {
		Toast("暂无可分配的设备");
	} else if (select.length < 1) {
		Toast("请先选择要分配的设备");
	} else {
		request({
			url: ApiUrl.distributionEquipment,
			method: "post",
			data: {
				userId: state.userId,
				machineDistributionVoList: select
			}
		}).then(res => {
			if (res.status == 0) {
				Toast("操作成功", "success");
				handlePopupClose();
				handleReset();
				getUserList();
			} else {
				Toast(res.msg);
			}
		})
	}
}

/* 选择的设备 */
const handlePopupEquipmentItem = (item) => {
	item.selected = !item.selected;
}

/* 重置数据 */
const handleReset = () => {
	state.params.pageNum = 1;
	state.params.pageSize = 10;
	state.params.pageCount = 1;
	state.userList = [];
}

/* 监听输入手机号输入框 */
watch(() => state.params.mobile, (val) => {
	if (!val) {
		state.params.pageNum = 1;
		state.userList = [];
		/* 获取子账号列表数据 */
		getUserList();
	}
})
</script>

<template>
  <view class="account_list">
		<NavBar v-model:navHeight="state.navHeight" :hideBack="false">
			<template v-slot:center>
				<view class="search">
					<view class="input">
						<image mode="widthFix" class="icon" src="/static/image/navbar/search.png" @click="handleSearch" />
						<input v-model="state.params.mobile" placeholder="请输入手机号码" />
					</view>
				</view>
			</template>
		</NavBar>
    <view v-if="state.userList.length > 0" class="list">
      <view class="card" v-for="(item, index) in state.userList" :key="item.id">
        <view class="header">
          <view class="name">{{ item.userName }}</view>
        </view>
        <view class="body">
          <view class="item" @click="handleCopyMobile(item.mobile)">联系电话：{{ item.mobile }} <text class="copy">复制</text></view>
          <view class="item">上级代理：{{ item.parentUserName }}</view>
          <view class="item">操作角色：{{ state.role[item.role?.id] }}</view>
          <view class="item" style="text-align: center">
            <view class="btn" style="width: 388rpx" @click="handleEquipment(item)">分配设备</view>
          </view>
        </view>
      </view>
    </view>
		<view v-else class="no_data">暂无数据</view>
		<view class="common_footer_btn">
		  <view @click="jumpPage('/pages/user/SubAccount/Add')">新增子账号</view>
		</view>
		<u-popup :show="state.isShowPopup" mode="center" round="16rpx">
			<view class="equipment_popup">
				<image class="icon_close" src="/static/image/icon/icon_close.png" mode="aspectFill" @click="handlePopupClose"></image>
				<view class="title">选择分配的设备</view>
				<view class="popup_list">
					<view class="popup_item" v-for="(item, index) in state.allEquipmentList" :key="index" @click="handlePopupEquipmentItem(item)">
						<image v-if="item.selected" src="/static/image/user/selected.png" mode="aspectFill"></image>
						<image v-else src="/static/image/user/select.png" mode="aspectFill"></image>
						<view>编号：{{ item.machineNo }}</view>
					</view>
				</view>
				<view class="footer">
					<view class="btn_cancel" @click="handlePopupClose">取消</view>
					<view class="btn_confirm" @click="handlePopupConfirm">确定</view>
				</view>
			</view>
		</u-popup>
  </view>
</template>

<style lang='scss'>
.account_list{
	box-sizing: border-box;
	padding-top: calc(v-bind('state.navHeight') * 1px);
	.m-nav {
		.nav {
			.center {
				left: unset !important;
				transform: translate(10%, -50%) !important;
				.search {
					width: 420rpx;
					.input {
						width: 420rpx;
						input {
							flex: 1;
						}
					}
				}
			}
		}
	}
	.list {
		border-radius: 24rpx;
		padding-bottom: 170rpx !important;
		.card {
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 24rpx 32rpx;
			.header {
				padding: 36rpx 24rpx 24rpx;
				.name {
					font-size: 28rpx;
					font-weight: bold;
					position: relative;
					margin-left: 26rpx;
					&:before {
						content: '';
						width: 6rpx;
						height: 40rpx;
						position: absolute;
						left: -26rpx;
						background: #FF4638;
						border-radius: 3rpx;
					}
				}
			}
			.body{
				padding: 0 32rpx 34rpx;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				color: #1A1A1A;
				position: relative;
				font-weight: bold;
				.item {
					&:not(:last-child) {
						border-bottom: solid 2rpx #F2F2F2;
						padding: 24rpx 0;
					}
				}
				.btn {
					margin-top: 24rpx;
				}
				.copy {
					color: #FF9832;
					margin-left: 58rpx;
					font-weight: normal;
				}
			}
		}
	}
	.no_data {
		margin-top: 24rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #CFCFD1;
		text-align: center;
	}
	.equipment_popup {
		position: relative;
		width: 560rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.icon_close {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			top: 26rpx;
			right: 26rpx;
		}
		.popup_list {
			box-sizing: border-box;
			padding-left: 80rpx;
			min-height: 400rpx;
			max-height: 400rpx;
			overflow-y: scroll;
			.popup_item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				image {
					width: 48rpx;
					height: 48rpx;
				}
				view {
					font-size: 28rpx;
					color: #353535;
					letter-spacing: 1px;
					margin-left: 12rpx;
				}
			}
		}
		.footer {
			width: 560rpx;
			height: 112rpx;
			background: #ffffff;
			border-radius: 0 0 16rpx 16rpx;
			box-sizing: border-box;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			display: flex;
			view {
				width: 50%;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				&.btn_confirm {
					color: #EC5644;
					border-left: 1px solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
</style>